<template>
	<div class="payment_index">
		<div class="payment_index_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">产品包<i class="el-icon-close"></i></div>
		</div>
		<div class="payment_index_bottom">
			<div class="payment_index_bottom_new">
				<div class="payment_index_bottom_new_goods">
					<div class="payment_index_bottom_new_goods_btn">
						<el-button type="primary" @click="handleAdd">添加产品包</el-button>
					</div>
					<div class="payment_index_bottom_new_goods_screening">
						<div class="payment_index_bottom_new_goods_screening_left">
							<!-- <el-radio v-model="radio" :label="estate" @change="handleRadio">{{estate}}</el-radio> -->
							<el-select v-model="selectValue" @change="selectTJ" placeholder="是否推荐">
								<el-option v-for="item in options" :key="item.value" :label="item.name"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="payment_index_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入产品包信息查询"></el-input>
							<button @click="handleSearch"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="payment_index_bottom_table_box">
				<div class="payment_index_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>产品包名称</th>
							<th>价格</th>
							<th>是否推荐</th>
							<th>报价</th>
							<th>面积</th>
							<th>户型</th>
							<th>风格</th>
							<th>已售</th>

							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
									@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.name}}</td>
							<td>{{v.price}}</td>
							<td>{{v.is_push==0?"否":"是"}}</td>
							<td>{{v.price}}</td>
							<td>{{v.area}}m²</td>

							<td>{{v.house_name}}</td>
							<td>{{v.style_name}}</td>
							<td>{{v.volume}}</td>
							<td>
								<button class="editor" @click='_toShopInfo' :data-id="v.id">详情</button>
								<button class="shelves" @click="handleDel(v.id)">删除</button>
								<!-- <button class="delete">关闭订单</button> -->
							</td>
						</tr>
						<tr v-if="tableList.length == 0">
							<td class="table_title" colspan="8">当前数据空空如也</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="sale_bottom_page">
			<div class="sale_bottom_page_left">
				<div class="sale_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
					<div class="checkbox-botton">全选</div>
				</div>
				<el-button type="primary" @click="selectDel" :disabled="openIsDisabled ">删除</el-button>
			</div>
			<div class="sale_bottom_page_right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" background>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	// import util from '@/uitls/util';
	export default {
		data() {
			return {
				radio: '', //选择推荐小区
				estate: '选择推荐小区',

				input: '',
				checkAll: false,
				currentPage4: 1,
				checkBoxAll: [], // 选中的数据
				page: 1,
				pagesize: 10,
				total: 0,
				tableList: [],
				value2: '',
				sid: null,
				openIsDisabled: false, //按钮的禁用
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				options: [{
					name: '是',
					value: '1'
				}, {
					name: '否',
					value: '0'
				}, {
					name: '所有',
					value: 'all'
				}],
				selectValue: 'all',
			}
		},
		mounted() {
			this.sid = localStorage.getItem('sid')
			this._getOrdersList()
		},
		methods: {
			handleAdd() {
				this.$router.push({
					path: "/productPackAdd"
				})
			},
			handleRadio(e) {
				console.log(e, "xuanz-----");
			},
			//点击查询
			handleSearch() {
				this._getOrdersList()
			},
			// 多选
			handlerCheckbox(i) {
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index > -1) {
						arr.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				}
				this.shelvesAlls.push(this.tableList[i].id);
				console.log(this.shelvesAlls, "选中的");
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
				} else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for (let i = 0; i < res.length; i++) {
					for (let j = i + 1; j < res.length; j++) {
						if (res[i] == res[j]) {
							res.splice(j, 1);
							j--;
						}
					}
				}
				// 全选下架
				// this.checkBoxAll.map(v => {
				//   return this.shelvesAlls.push(this.tableList[v].product_id.toString());
				// });
			},
			// 选中删除
			selectDel() {
				this.$confirm("此操作将删除选中商品, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						let selectID = this.shelvesAlls.join(",")
						this.$http.post("/api/admin/newpk/ProductPack/del", {
								id_lst: selectID,
							})
							.then(res => {
								if (res.code == 1) {
									this._getOrdersList()
									this.checkBoxAll = [];
									if (this.checkBoxAll.length == 0) {
										this.checkAll = false;
										this.openCenter();
									}
								}
							});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},

			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pagesize = val;
				this._getOrdersList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.page = val
				this._getOrdersList()
			},
			// 获取产品列表
			_getOrdersList() {
        let  role_type = localStorage.getItem('role')
				let params = {
					keyword: this.input,
					page: this.page,
					pagesize: this.pagesize,
					is_push: this.selectValue,
          role_type
				}
				this.$http.post("/api/admin/newpk/ProductPack/lst", params).then(res => {
					console.log(res, "chanpin列表数据");
					if (res.code == 1) {
						this.tableList = res.data.data ? res.data.data : [];
						this.total = res.data.count; //总条数
						if (this.tableList.length == 0) {
							this.openIsDisabled = true;
						} else {
							this.openIsDisabled = false;
						}
					}

				})
			},
			// 是否推荐
			selectTJ() {
				this._getOrdersList()
			},
			// 消息提示
			openCenter() {
				this.$message({
					message: "删除成功",
					type: "success",
					duration: 2000,
					center: true
				});
			},

			//点击详情跳转
			_toShopInfo(e) {
				// console.log(e);
				let id = e.target.dataset.id;
				this.$router.push({
					path: `/productPackAdd?id=${id}`
				})
			},
			handleDel(event) {
				console.log(event, 5656);
				let params = {
					id_lst: event
				}
				this.$confirm('是否确定删除', '提示').then(() => {
					this.$http.post("/api/admin/newpk/ProductPack/del", params).then(res => {
						if (res.code == 1) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this._getOrdersList()
						}
					})
				}).catch(() => {

				});
			}
		},
	}
</script>


<style lang="less" scoped="scoped">
	@import "index.less";
</style>
